<template>
<div class="login">
<img src="../assets/logo.png"></img>

<el-form ref="loginfromref" class="form_login" :model="ruleForm" :rules="rules"  label-width="100px">
  <el-form-item label="名字" prop="username">
    <el-input prefix-icon="iconfont icon-user" v-model="ruleForm.username"></el-input>
  </el-form-item>

   <el-form-item  label="密码" prop="password">
    <el-input  prefix-icon="iconfont icon-3702mima" v-model="ruleForm.password"></el-input>
  </el-form-item>

     <el-form-item class="login_btn">
      <el-button type="primary" @click="login">登陆</el-button>
      <el-button type="info" @click="resetform" >重置</el-button>
  </el-form-item>
  </el-form>
</div>

</template>
<script>
export default{
    data(){
       return{
            ruleForm: {
          username: 'admin',
          password: '123456',
            },
             rules: {
          username: [
            { required: true, message: '请输入正确的名字，长度3到5', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '请输入正确的密码，长度5到15', trigger: 'blur' },
             { min: 5, max: 15, message: '长度在 5 到 15 个字符', trigger: 'blur' }
          ],
    
             },
       }
    },
    methods:{
        resetform(){
this.$refs.loginfromref.resetFields()
        },
        login(){
          this.$refs.loginfromref.validate(async valid=>{

              if(!valid) {
                  return this.$mesage.error("登陆失败")
              }else{
               var {data:res}=await this.$http.post("login",this.ruleForm)
              //  console.log(res)
                 this.$message.success("登陆成功")
               window.sessionStorage.setItem("token",res.data.token)
               this.$router.push("/home")
             
              }
          }) 
        }
    }

}
</script>
<style lang="less" scope>

.login{
    background-color:#fff;
    width:450px;
    border:1px solid border;
    position:absolute;
    height:400px;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
border-radius:5px;



    img{
    display:block;
    box-shadow:0 0 10px #ccc;
    padding:10px;
    background-color:#ccc;
   width:130px;
    height:130px;
    border-radius:50%;
    padding:5px;
    box-shadow:0 0 5 #ddd;
    position:absolute;
    left:50%;
    transform:translate(-50%,-50%);
    }
    .form_login{
        width:100%;
        position:absolute;
        bottom:0;
        box-sizing:border-box;
        padding:0 20px;
        .login_btn{
display:flex;
justify-content:flex-end;
        }
    }

}


</style>